<script setup lang="ts">
  import { PropType, ref, watch, onMounted } from 'vue'
  import { amountForamt } from '@/utils/tools'
  import { getNetworkEmpPageSelect } from '@/api/network'
  import _ from 'lodash'
  import { ElSelect } from 'element-plus'

  defineOptions({
    name: 'PermissionStrategyNetworkCreate',
  })

  const props = defineProps({
    teamType: {
      type: Number as PropType<1 | 2>,
      default: () => 1,
    },
    id: {
      type: String,
      default: () => '',
    },
    strategy: {
      type: Object as PropType<{
        // 确认接单策略： false-人工确认，true-自动确认
        autoSureReceiveOrder: boolean

        // 是否自动审核取消工单：false-人工审核，true-自动审核
        autoCheckCancelOrder: boolean

        // 是否自动审核申请结单：false-人工审核，true-自动审核
        autoCheckEndOrder: boolean

        // 是否启用更改备件价格：false-不允许修改，true-允许修改
        enableUpdateSparePrice: boolean

        // 费用查询人员权限对象，团队负责人ID值为-1，当allowSelectFee=true时生效
        selectFeeEmpRootVos: Array<string>

        // 是否允许提现：false-不允许，true-允许
        allowWithdrawal: boolean

        // 提现人员权限对象，团队负责人ID值为-1，当allowWithdrawal=true 时生效
        withdrawEmpRootVos: Array<string>

        // 是否允许管理员代提现：false-不允许，true-允许
        allowManagerHelpWithdraw: boolean

        // 提现手续费策略：1-按比例收取(按提现总金额计算)，2-每间固定(按每单总金额计算)
        withdrawHandlingFeeStrategy: number

        // 手续费比例，单位为%，当withdrawHandlingFeeStrategy=1时生效
        handingFeeProportion: number

        // 每单固定手续费：当withdrawHandlingFeeStrategy=2时生效
        handingFeeFixedOrder: number

        // 是否允许防伪查询：false-关闭查询，true-允许查询
        allowSecurityCheck: boolean

        // 是否允许新建工单：false-关闭，true-开启
        allowCreateOrder: boolean

        // 是否允许物料申请：false-关闭，true-开启
        allowApplySpare: boolean

        // 是否允许查看知识库：false-关闭，true-开启
        allowSelectKnowledgeBase: boolean

        // autoDispatchOrder: boolean //是否自动派单 false：关闭，true：启用,示例值(true)
        // enableScanReceive: boolean //是否启用扫码收款 false：不启用，true：启用,示例值(true)
        // importReceiverVoucher: boolean //是否上传收款凭证 false：不用上传，true：必须上传,示例值(true)

        // 是否允许查看费用：false-不允许，true-允许
        allowSelectFee: boolean

        // 允许修改条码：false-不允许，true-允许,示例值(true)
        allowUpdateSnCode: boolean

        // 是否允许查看免费额度：false-不允许，true-允许
        allowSelectAmount: boolean
      }>,
      default: () => {
        return {
          autoSureReceiveOrder: true,
          autoCheckCancelOrder: false,
          autoCheckEndOrder: false,
          enableUpdateSparePrice: true,
          selectFeeEmpRootVos: ['-1'],
          allowWithdrawal: true,
          withdrawEmpRootVos: ['-1'],
          allowManagerHelpWithdraw: true,
          withdrawHandlingFeeStrategy: 1,
          handingFeeProportion: 0,
          handingFeeFixedOrder: 0,
          allowSecurityCheck: true,
          allowCreateOrder: true,
          allowApplySpare: true,
          allowSelectKnowledgeBase: true,
          // autoDispatchOrder: false,
          // enableScanReceive: false,
          // importReceiverVoucher: false,
          allowSelectFee: true,
          allowUpdateSnCode: true,
          allowSelectAmount: true,
        }
      },
    },
  })

  // 分配人员选项
  const networkEmpOptional = ref([])

  // 获取分配人员选项加载
  const getNetworkEmpOptionalLoading = ref(false)

  // 获取分配人员选项请求参数
  const getNetworkEmpOptionsParam = ref({
    limit: 0,
    name: '',
    page: 0,
  })

  /**
   * 获取分配人员选项
   */
  const total = ref(0)
  const getNetworkEmpOptionsFn = _.throttle(async () => {
    getNetworkEmpOptionalLoading.value = true
    const res = await getNetworkEmpPageSelect(getNetworkEmpOptionsParam.value, props.id)
    networkEmpOptional.value = res.data.success ? res.data.data.rows : []
    total.value = Number(res.data.data.total || 0)
    getNetworkEmpOptionalLoading.value = false
  }, 600)

  // 表单
  const form = ref(props.strategy)

  watch(
    () => props.strategy,
    (value) => {
      form.value = value
    },
    { immediate: true },
  )

  onMounted(() => {
    if (props.id) {
      getNetworkEmpOptionsFn()
    }
  })

  defineExpose({
    getForm: () => {
      return { ...form.value }
    },
  })
</script>

<template>
  <div class="permission-strategy-network-create">
    <div class="title">网点权限策略</div>
    <el-form v-model="form" label-width="auto">
      <el-form-item label="接单策略">
        <el-radio-group v-model="form.autoSureReceiveOrder" :disabled="props.teamType === 2">
          <el-radio :value="true" size="small">自动接单</el-radio>
          <el-radio :value="false" size="small">手动接单</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="取消工单">
        <el-radio-group v-model="form.autoCheckCancelOrder">
          <el-radio :value="false" size="small">人工审核</el-radio>
          <el-radio :value="true" size="small">自动审核</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="结单审核">
        <el-radio-group v-model="form.autoCheckEndOrder">
          <el-radio :value="false" size="small">人工审核</el-radio>
          <el-radio :value="true" size="small">自动审核</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="物料价格">
        <el-radio-group v-model="form.enableUpdateSparePrice">
          <el-radio :value="true" size="small">允许修改</el-radio>
          <el-radio :value="false" size="small">禁止修改</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 工单费用查看 -->
      <el-form-item label="工单费用查看">
        <el-radio-group v-model="form.allowSelectFee">
          <el-radio :value="true" size="small">允许查看</el-radio>
          <el-radio :value="false" size="small">禁止查看</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 费用查看权限 -->
      <el-form-item label="费用查看权限">
        <el-select
          v-model="form.selectFeeEmpRootVos"
          multiple
          style="width: 160px"
          collapse-tags
          :disabled="!form.allowSelectFee"
          collapse-tags-tooltip
          placeholder="选择费用查看权限"
          clearable
        >
          <template v-if="total > 30" #header>
            <div style="display: flex; gap: 6px">
              <el-input
                v-model.trim="getNetworkEmpOptionsParam.name"
                placeholder="请输入结算人员名称"
                @keyup.enter="getNetworkEmpOptionsFn"
              />
              <h-plain-button @click="getNetworkEmpOptionsFn">搜索</h-plain-button>
            </div>
          </template>
          <el-option label="团队负责人" value="-1" />
          <el-option
            v-for="item in networkEmpOptional"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          >
            <h-tooltip-text :text="item.name" :max-width="100" :height="34" />
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 防伪查询 -->
      <el-form-item label="防伪查询">
        <div class="switch-container">
          <el-switch v-model="form.allowSecurityCheck" size="small"></el-switch>
          {{ form.allowSecurityCheck ? '开启' : '关闭' }}
        </div>
      </el-form-item>

      <!-- 新建工单 -->
      <el-form-item label="新建工单">
        <div class="switch-container">
          <el-switch v-model="form.allowCreateOrder" size="small"></el-switch>
          {{ form.allowCreateOrder ? '开启' : '关闭' }}
        </div>
      </el-form-item>

      <!-- 物料申请 -->
      <el-form-item label="物料申请">
        <div class="switch-container">
          <el-switch v-model="form.allowApplySpare" size="small"></el-switch>
          {{ form.allowApplySpare ? '开启' : '关闭' }}
        </div>
      </el-form-item>

      <!-- 知识库查看 -->
      <el-form-item label="知识库查看">
        <div class="switch-container">
          <el-switch v-model="form.allowSelectKnowledgeBase" size="small"></el-switch>
          {{ form.allowSelectKnowledgeBase ? '开启' : '关闭' }}
        </div>
      </el-form-item>

      <!-- 免费额度查看 -->
      <el-form-item label="免费额度查看">
        <div class="switch-container">
          <el-switch v-model="form.allowSelectAmount" size="small"></el-switch>
          {{ form.allowSelectAmount ? '允许' : '禁止' }}
        </div>
      </el-form-item>

      <!-- 修改条码 -->
      <el-form-item label="修改条码">
        <el-radio-group v-model="form.allowUpdateSnCode">
          <el-radio :value="true" size="small">允许修改</el-radio>
          <el-radio :value="false" size="small">禁止修改</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
  @import './index.scss';
</style>
